<template>
	<view class="kyyq">
		<view
		  class="kyyq_item"
		  v-for="(item, index) in listData"
		  :key="index"
		>
		  <view class="item_top">
		    <view class="label">
		      <view class="icon" :class="item.class">{{ index + 1 }}</view>
		      {{ item.label }}
		    </view>
		    <view class="percentage">{{ item.percentage }}%</view>
		  </view>
		  <view class="item_bottom">
				<u-line-progress
				 :percent='item.percentage'
				 :inactive-color="'rgba(112, 112, 112, 0.23)'"
				 :show-percent="false" height="12"
				></u-line-progress>
		  </view>
		</view>
	</view>
</template>

<script>
	import { listYQJBXXB } from "@/api/zhyp/statistics";
	export default {
		data() {
			return {
				personType: [],
				personNum: [],
				listData: [],
				label: ["仪器共享服务", "检验检测服务", "实验服务"],
				class: ["gx", "jyjc", "sy"],
				code:'6103'
			};
		},
		created() {
			this.getData();
		},
		methods: {
			async getData() {
				this.listData = []
				let kyyqData;
				if (this.code === "6103") {
					kyyqData = { cityName: this.code };
				} else {
					kyyqData = { area: this.code };
				}
				const { total } = await listYQJBXXB(kyyqData);
				for (let index = 1; index <= 3; index++) {
					this.$set(kyyqData, "serviceTypeId", `${index}`);
					const res = await listYQJBXXB(kyyqData);
					this.listData.push({
						label: this.label[index - 1],
						value: res.total,
						percentage: this.percentage(total, res.total),
						class: this.class[index - 1],
					});
				}
			},
			percentage(sum, num) {
				if (num === 0) {
					return 0;
				}
				return Number(((num / sum) * 100).toFixed(2));
			},
		},
	}
</script>

<style lang="scss">
	.kyyq {
	  color: #d0deee;
	  font-size: 28rpx;
	  width: 100%;
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-around;
	  .kyyq_item {
			margin-top: 44rpx;
	    width: 100%;
	    .item_top {
	      margin-bottom: 24rpx;
	      display: flex;
	      justify-content: space-between;
	      .label {
	        display: flex;
	        .icon {
	          width: 1.5rem;
	          height: 1rem;
	          border: 0.0625rem solid #ffc100;
	          text-align: center;
	          line-height: 1rem;
	          font-size: 0.75rem;
	          &.gx {
	            background-color: rgba(255, 193, 0, 0.1);
	          }
	          &.jyjc {
	            background-color: rgba(255, 119, 52, 0.1);
	            border-color: #ff7734;
	          }
	          &.sy {
	            background-color: rgba(102, 225, 223, 0.1);
	            border-color: #66e1df;
	          }
	        }
	      }
	    }
	  }
	}
	::v-deep .u-active{
		background-color: unset !important;
		background-image: linear-gradient(
		  to right,
		  rgba(27, 126, 242, 0),
		  rgba(27, 126, 242, 1)
		);
	}
</style>